<template>
  <Transition name="slide" v-on="transitionEvents">
    <div class="my-alert" :class="{
      [`my-alert--${type}`]: type,
      'is-center': center,
      [`is-${effect}`]: effect
    }" v-show="visible">
      <Icon v-if="showIcon" :icon="iconClass[type] ? iconClass[type] : iconClass.info" class="my-alert-icon" :class="{
        'is-big': description
      }" />
      <div class="my-alert__content">
        <span class="my-alert__title" :class="{
          'is-blod': description
        }">
          <slot name="title">{{ title }}</slot>
        </span>
        <p v-if="description" class="el-alert__description">{{ description }}</p>
        <slot v-if="closable" name="closeText">
          <i class="my-icon-close is-customed" @click="handleClose">{{ closeText }}</i>
          <Icon v-if="!closeText" icon="fa-solid fa-xmark" class="my-icon-close" @click="handleClose" />
        </slot>
      </div>
    </div>
  </Transition>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Icon from '../Icon/Icon.vue'
import { type AlertEmits, type AlertProps } from './types'
defineOptions({
  name: 'MyAlert'
})
withDefaults(defineProps<AlertProps>(), {
  type: 'info',
  effect: 'light',
  closable: true
})
const iconClass = {
  success: 'fa-solid fa-circle-check',
  info: 'fa-solid fa-circle-info',
  warning: 'fa-solid fa-circle-exclamation',
  error: 'fa-solid fa-circle-xmark'
}
const visible = ref(true)
const emits = defineEmits<AlertEmits>()
const handleClose = () => {
  visible.value = false
  emits('close')
}
const transitionEvents: Record<string, (el: HTMLElement) => void> = {
  beforeEnter(el) {
    el.style.opacity = '1'
  },
  enter(el) {
    el.style.opacity = `${el.style.opacity}`
  },
  afterEnter(el) {
    el.style.opacity = '0'
  },
  beforeLeave(el) {
    el.style.opacity = '0'
  },
  leave(el) {
    el.style.opacity = `${el.style.opacity}`
  },
  afterLeave(el) {
    el.style.opacity = '1'
  }
}
</script>

<style scoped></style>